<template>
  <div>

    <!-- 头部搜索框 -->
    <div class="search">
      <router-link class="search-box" tag="div" to="search"> 
        <van-icon name="search" />搜索饿了吗商家、商品名称
      </router-link>
    </div>

<div class="main">

<!-- 轮播图 -->
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>
    <ul>
      <li v-for="(item,i) in swipeList" :key="i">
        <img :src="item.img">
        <p>{{item.title}}</p>
      </li>
    </ul>
  </van-swipe-item>
  <van-swipe-item>
    <ul>
      <li>
        <img src="@/assets/img/pic16.jpeg">
        <p>地方小吃</p>
      </li>
    </ul>
  </van-swipe-item>
</van-swipe>


<!-- 热门推荐 -->
<div class="hot">
  <div class="left">
<h3>品质套餐</h3>
<p class="gray">搭配齐全吃得好</p>
<p class="orange">立即抢购></p></p>
  </div>

  <div class="right"><img src="/img/pic04.png"></div>
</div>



<ul class="list">
 <li v-for="(item,i) in arr" :key="i">
   <img :src="'https://cube.elemecdn.com/'+item.restaurant.image_path+'.jpeg'" >
   <div class="right">
     <h4>{{item.restaurant.name}}</h4>
     <p></p>
     <p></p>
     <p></p>
   </div>
   
   </li>
</ul>




</div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      //轮播数据
      swipeList:[
      {img:'/img/pic10.jpeg',title:'美食'},
      {img:'/img/pic12.jpeg',title:'晚餐'},
      {img:'/img/pic13.jpeg',title:'商超便利'},
      {img:'/img/pic05.jpeg',title:'果蔬生鲜'},
      {img:'/img/pic09.jpeg',title:'医药健康'},
      {img:'/img/pic08.jpeg',title:'大牌5折'},
      {img:'/img/pic06.jpeg',title:'浪漫鲜花'},
      {img:'/img/pic07.jpeg',title:'麻辣烫'},
      {img:'/img/pic03.jpeg',title:'地方菜系'},
      {img:'/img/pic11.jpeg',title:'披萨意面'},
      ],
      arr:[]
    };
},
  mounted() {

    // 请求数据
     this.$axios({ url: "/list.json", methods: "get" }).then((res) => {
     
     //初始化解析图片url
      res.data.items.forEach((item)=>{
        item.restaurant.image_path=item.restaurant.image_path.slice(0,1)+'/'+item.restaurant.image_path.slice(1,3)+'/'+item.restaurant.image_path.slice(3,)
        // console.log(item.restaurant.image_path);
      })

       console.log(res.data.items);
      this.arr=res.data.items
    });

  },
  methods: {},
};
</script>

<style lang="scss" scoped>
// 头部搜索
.search{
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #12A4FF;
  .search-box{
    width: 90%;
    line-height: 40px;
    text-align: center;
    color: gray;
  background: #fdfdfd;

  }
}


.main{
  height: 550px;
  overflow: auto;
  // background: pink;




// 轮播
 .my-swipe .van-swipe-item {
   height: 180px;
    background-color: #f1f4f7;
    ul{
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      li{
        width: 20%;
        height: 70px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
      img{
        width: 70%;
        height: 60%;
      }
      p{
        width: 100%;
        height: 20%;
        color: rgb(41, 41, 41);
        font-size: 10px;
      }
      }
    }
  }

// 热门推荐
  .hot{
height: 120px;
display: flex;
background-color: #f1f4f7;

.left{
  width: 60%;
  height: 100%;
  .gray{
    color:gray;
  }
  .orange{
    color: rgb(207, 136, 4);
  }
  h3{
    margin-top: 20px;
  }
  p{
    margin: 10px 0;
  }
}
.right{
  width: 40%;
  height: 100%;
  img{
     width: 100%;
  height: 80%;
  margin:12px 0 ;
  }
}
  }

//商品
.list{
  li{
    height: 150px;
    display: flex;
    img{
      width: 30%;
    }
    .right{
      width: 70%;
      
    }
  }
}


}
</style>